<template>
    <div class='tool_bar_container'>
        <div class="title">← 工具栏 →</div>
        <div v-for="(item, index) in toolbarList" :class="['tool_bar_item', (index == active) ? 'active' : '']"
            @click="clickToolBarItemHanlder(index, item)">
            <img :src="item.svg" :alt="item.alt" :title="item.alt">
        </div>

        <PaintBrushBox v-show="showBox['0']" @clickPaintBrushBtn="clickButtonHandler" />

        <div class="eraser_container" v-show="showBox['1']">
            <div class="eraser_width" :style="{
                width: eraserWidth * 1.5 + 'px',
                height: eraserWidth * 1.5 + 'px',
            }"></div>
            <input class="input_range" type="range" :value="eraserWidth"
                @input="clickButtonHandler('eraserWidth', ($event.target as any).value)" max="12" min="4" />
        </div>

        <div class="preservation_container" v-show="showBox['3']">
            <div @click="clickButtonHandler('preservationLocal')">保存至本地</div>
            <div @click="clickButtonHandler('preservationClipBoard')">保存至剪切板</div>
        </div>

        <BlackBoardBgBox v-show="showBox['8']" @clickPaintBrushBtn="clickButtonHandler" />
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { toolbarList } from './list';
import { paintBrushColor, lineWidth, activeColor, activeType, activeBg, showBox } from './data';
import { useShowBoxHandle } from './composition';
import PaintBrushBox from './paintbrushbox.vue';
import BlackBoardBgBox from './blackboardbgbox.vue';

const emits = defineEmits(["clickCallbackHandler"])

const active = ref(0);
const eraserWidth = ref(4);

const clickToolBarItemHanlder = (index: number, item: any) => {
    useShowBoxHandle(String(index));
    active.value = index;

    const objectHandler: Record<number, () => void> = {
        "0": () => {
            emits("clickCallbackHandler", "width", {
                lineWidth: lineWidth.value,
                strokeStyle: paintBrushColor[activeColor.value],
                lineDash: activeType.value,
            })
        },
        "1": () => {
            emits("clickCallbackHandler", "eraserWidth", { lineWidth: eraserWidth.value })
        },
        "2": () => emits("clickCallbackHandler", "clear"),
        "3": () => { },
        "4": () => {
            const isMouse = item.svg === item.svg1;
            if (isMouse) {
                item.svg = item.svg2
            } else {
                item.svg = item.svg1
            }
            emits("clickCallbackHandler", "mouseOrPen", isMouse)
        },
        "5": () => emits("clickCallbackHandler", "uploadFile"),
        "6": () => emits("clickCallbackHandler", "left"),
        "7": () => emits("clickCallbackHandler", "right"),
        "8": () => { },
    }

    objectHandler[index]();
}

const clickButtonHandler = (type: string, item?: string, index?: number) => {
    const objectHandler: Record<string, () => void> = {
        color: () => {
            activeColor.value = index!;
            emits("clickCallbackHandler", "color", { strokeStyle: item });
        },
        bgColor: () => {
            activeBg.value = index!;
            emits("clickCallbackHandler", "bgColor", item);
        },
        lineType: () => {
            activeType.value = index!;
            emits("clickCallbackHandler", "lineType", item);
        },
        preservationLocal: () => {
            emits("clickCallbackHandler", "preservationLocal");
        },
        preservationClipBoard: () => {
            emits("clickCallbackHandler", "preservationClipBoard");
        },
        width: () => {
            lineWidth.value = +item!;
            emits("clickCallbackHandler", "width", { lineWidth: lineWidth.value });
        },
        eraserWidth: () => {
            eraserWidth.value = +item!;
            emits("clickCallbackHandler", "eraserWidth", { lineWidth: eraserWidth.value });
        },
        bgImage: () => {
            emits("clickCallbackHandler", "bgImage", item);
        },
    }
    objectHandler[type]()
}
</script>

<style scoped lang="scss">
.tool_bar_container {
    border-radius: 4px;
    position: absolute;
    left: 20px;
    top: 50px;
    padding: 8px 10px;
    border-radius: 40px;
    box-shadow: 0 1px 2px 0 rgb(32 33 36 / 38%);
    cursor: pointer;
    font-size: 12px;
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    width: 100px;
    background-color: #ffffff;

    .title {
        width: 100%;
        text-align: center;
        margin: 5px;
    }

    .tool_bar_item {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        margin: 5px;
        border: 1px solid transparent;
        border-radius: 50%;
        overflow: hidden;
        transition: background-color 0.3s;

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .active {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

.eraser_container {
    position: absolute;
    left: 125px;
    top: 15px;
    padding: 10px;
    margin: 0;
    box-shadow: 2px 2px 10px 1px rgba(18, 18, 20, 0.38);
    background-color: #fff;
    border-radius: 8px;
    width: 250px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .eraser_width {
        margin: auto 10px;
        background-color: #000000;
        border-radius: 50%;
    }
}

.input_range {
    appearance: none;
    width: 200px;
    height: 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    position: relative;
    margin: 0;

    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 1px;
        background-color: rgb(216, 234, 250);
        clip-path: polygon(0% 50%, 95% 0, 95% 100%);
    }

    &::-webkit-slider-runnable-track {
        -webkit-appearance: none;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        background: #ffffff;
        border-radius: 50%;
        z-index: 10;
        position: relative;
        cursor: pointer;
        border: 2px solid #ddd;
    }
}

.preservation_container {
    position: absolute;
    left: 125px;
    top: 60px;
    padding: 10px;
    margin: 0;
    box-shadow: 2px 2px 10px 1px rgba(18, 18, 20, 0.38);
    background-color: #fff;
    border-radius: 8px;
    width: 120px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    div {
        transition: all 0.3s;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;

        &:hover {
            background-color: #dddddd;
        }
    }
}
</style>